<template>
	<view class="song_detail">
		<view class="title">{{title}}</view>
		<view class="content">
			<block v-for="(item, index) in songs" :key="item.id">
				<view class="song_detail_item" @click="handleSongClick(item.id, index)">
					<song-item :index="index"
										 :songName="item.name"
										 :singer="item.ar[0].name"
										 :itemId="item.id"
										 />
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import songItem from '../../components/song-item/song-item.vue'
	
	import { getStore, setStore } from '../../util/storage.js'
	
	export default {
		components:{
			songItem
		},
		data(){
			return {
				title: '',
				songs: [],
				type: ''
			}
		},
		onLoad(option) {
			this.title = option.id
			this.songs = getStore(option.id)
		},
		methods: {
			handleSongClick(id, index) {
				setStore('playlist', {
					songIndex: index,
					songLists: this.songs
				})
				uni.navigateTo({
					url:'../music_player/music_player?id='+id
				})
			}
		}
	}
</script>

<style scoped>
	.song_detail {
		padding: 10rpx;
	}
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
</style>
